/**
 * 注册页面组件
 */

// 引入 React 及其钩子函数，useState 用于管理组件的状态
import React, { useState, useEffect } from 'react'
// 引入 React Router DOM 中的 Link 和 useNavigate 组件，Link 用于创建导航链接，useNavigate 用于实现编程式导航
import { Link, useNavigate } from 'react-router-dom'
// 引入 Ant Design 组件库中的表单、输入框、按钮、消息提示、卡片和复选框组件
import { Form, Input, Button, message, Card, Checkbox } from 'antd'
// 引入 Ant Design 图标库中的用户、邮件和锁图标
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons'
// 引入自定义的身份验证状态管理钩子，用于管理用户的登录状态
import { useAuthStore } from '../stores/auth'
// 引入自定义的 API 服务，用于与后端进行数据交互
import apiClient from '../services/api'

/**
 * 注册组件，用于用户注册功能
 * @returns {JSX.Element} 注册页面的 JSX 元素
 */
const Register = () => {
  // 使用 Form.useForm 创建表单实例，方便后续对表单进行操作
  const [form] = Form.useForm()
  // 使用 useState 定义 loading 状态，用于控制注册按钮的加载状态
  const [loading, setLoading] = useState(false)
  // 使用 useState 定义 agreedToTerms 状态，用于记录用户是否同意用户协议和隐私政策
  const [agreedToTerms, setAgreedToTerms] = useState(false)
  // 使用 useNavigate 获取导航函数，用于页面跳转
  const navigate = useNavigate()
  // 从身份验证状态管理中获取 login 函数，用于用户登录
  const login = useAuthStore(state => state.login)
  // 使用 useState 定义动画状态
  const [isVisible, setIsVisible] = useState(false)

  // 页面加载时添加渐入动画
  useEffect(() => {
    setIsVisible(true)
  }, [])

  /**
   * 处理注册表单提交的函数
   * @param {Object} values - 表单提交的值
   */
  const handleRegister = async (values) => {
    console.log('🔍 实际发送的数据:', values);
    // 检查用户是否同意用户协议和隐私政策
    if (!agreedToTerms) {
      // 如果不同意，显示错误消息
      message.error('请先阅读并同意用户协议和隐私政策')
      return
    }

    // 设置加载状态为 true，显示加载效果
    setLoading(true)
    try {
      // 调用 API 服务的 post 方法，将表单数据发送到后端进行注册
      const response = await apiClient.post('/api/auth/register', values)

      // 检查响应数据的 success 字段是否为 true
      if (response.data.success) {
        // 如果注册成功，显示成功消息
        message.success('注册成功！')

        // 从响应数据中获取用户信息和令牌 - 后端统一返回扁平结构
        const { user, access_token, refresh_token } = response.data.data
        
        // 直接设置认证状态，而不是调用login函数
        // login函数需要credentials，我们已经有了user和tokens
        const authData = {
          user: user,
          token: access_token,
          refreshToken: refresh_token
        }
        useAuthStore.getState().setAuth(authData)

        // 跳转到首页，并替换当前历史记录
        navigate('/', { replace: true })
        return
      }
    } catch (error) {
      // 打印注册失败的错误信息
      console.error('注册失败:', error)

      // 检查错误响应中是否包含详细的验证错误信息
      if (error.response?.data?.errors) {
        // 如果有，遍历错误信息并显示
        error.response.data.errors.forEach(err => {
          message.error(err)
        })
      } else if (error.response?.data?.message) {
        // 如果有错误消息，显示错误消息
        message.error(error.response.data.message)
      } else {
        // 如果没有详细信息，显示通用错误消息
        message.error('注册失败，请稍后重试')
      }
    } finally {
      // 无论注册成功或失败，都将加载状态设置为 false
      setLoading(false)
    }
  }

  return (
    // 注册页面的容器
    <div className="register-container" style={{ 
      minHeight: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center', 
      padding: '20px', 
      backgroundColor: '#f5f5f5'
    }}>
      {/* 注册卡片组件 */}
      <Card className="register-card" style={{ 
        maxWidth: 480, 
        width: '100%', 
        margin: '0 auto',
        borderRadius: '12px',
        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
        padding: '30px',
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
        transition: 'opacity 0.5s ease, transform 0.5s ease'
      }}>
        {/* 注册页面的头部 */}
        <div className="register-header" style={{ 
          textAlign: 'center', 
          marginBottom: '30px',
          paddingBottom: '20px',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <h2 style={{ 
            margin: '0 0 8px 0', 
            fontSize: '24px', 
            fontWeight: '600',
            color: '#1890ff'
          }}>注册账户</h2>
          <p style={{ 
            margin: 0, 
            color: '#666',
            fontSize: '14px'
          }}>加入二手交易系统，开始你的交易之旅</p>
        </div>

        {/* 注册表单，使用之前创建的表单实例，垂直布局，提交时调用 handleRegister 函数 */}
        <Form
          form={form}
          layout="vertical"
          onFinish={handleRegister}
          className="register-form"
          style={{ marginBottom: '20px' }}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: '请输入用户名' },
              { min: 3, max: 20, message: '用户名长度为3-20个字符' },
              {
                pattern: /^[a-zA-Z0-9_]+$/,
                message: '用户名只能包含字母、数字和下划线'
              }
            ]}
          >
            {/* 输入框组件，显示用户图标和提示信息 */}
            <Input
              prefix={<UserOutlined />}
              placeholder="用户名（3-20个字符，支持字母数字下划线）"
              size="large"
              style={{
                borderRadius: '6px',
                transition: 'border-color 0.3s ease'
              }}
            />
          </Form.Item>

          {/* 邮箱表单项，设置必填和邮箱格式规则 */}
          <Form.Item
            name="email"
            rules={[
              { required: true, message: '请输入邮箱地址' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            {/* 输入框组件，显示邮件图标和提示信息 */}
            <Input
              prefix={<MailOutlined />}
              placeholder="邮箱地址（用于登录）"
              size="large"
              style={{
                borderRadius: '6px',
                transition: 'border-color 0.3s ease'
              }}
            />
          </Form.Item>

          {/* 密码表单项，设置必填、长度和格式规则 */}
          <Form.Item
            name="password"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码至少需要6个字符' },
              {
                pattern: /^(?=.*[a-zA-Z])(?=.*\d)/,
                message: '密码必须包含字母和数字'
              }
            ]}
          >
            {/* 密码输入框组件，显示锁图标和提示信息 */}
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="密码（至少6位，包含字母和数字）"
              size="large"
              style={{
                borderRadius: '6px',
                transition: 'border-color 0.3s ease'
              }}
            />
          </Form.Item>

          {/* 确认密码表单项，设置必填和与密码一致规则 */}
          <Form.Item
            name="confirmPassword"
            dependencies={['password']}
            rules={[
              { required: true, message: '请确认密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve()
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'))
                },
              }),
            ]}
          >
            {/* 密码输入框组件，显示锁图标和提示信息 */}
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="确认密码"
              size="large"
              style={{
                borderRadius: '6px',
                transition: 'border-color 0.3s ease'
              }}
            />
          </Form.Item>

          {/* 用户协议和隐私政策复选框 */}
          <Form.Item>
            <Checkbox
              checked={agreedToTerms}
              onChange={(e) => setAgreedToTerms(e.target.checked)}
              style={{ fontSize: '14px' }}
            >
              我已阅读并同意 <a href="#" style={{ color: '#1890ff' }}>用户协议</a> 和 <a href="#" style={{ color: '#1890ff' }}>隐私政策</a>
            </Checkbox>
          </Form.Item>

          {/* 注册按钮 */}
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              loading={loading}
              style={{
                width: '100%',
                height: '44px',
                borderRadius: '6px',
                fontSize: '16px',
                fontWeight: '500'
              }}
            >
              注册账户
            </Button>
          </Form.Item>
        </Form>

        {/* 登录链接 */}
        <div style={{ textAlign: 'center' }}>
          <span style={{ color: '#666', fontSize: '14px' }}>
            已有账户？ <a href="/login" style={{ color: '#1890ff' }}>立即登录</a>
          </span>
        </div>
      </Card>
    </div>
  )
}

export default Register